{literal}
<script>
    $('.calcCost').live('keyup', function () {
        var minCost = Number($(this).attr('data-minCost'));
        var noOfMin = Number($(this).val());

        var cost = noOfMin * minCost;

        var id = $(this).attr('data-id');

        $('#empCost' + id).html(cost);
    });

    // $('#chooseEmp').live('change', function () {
    //     $('#search_Me').submit();
    // });
</script>
{/literal}
<div class="row">
    <div class="container">
        <ol class="breadcrumb">
            <li><a href="#">اداره الموظفين</a></li>
            <li class="active">تقرير الغائبين</li>
        </ol>
        <div class="panel panel-default">
            <!-- Default panel contents -->
            <div class="panel-heading">
                <h3 class="panel-title">تقرير الغائبين</h3>
                <a href="{$youtubes[173]->url}" target="_blank" class="hidden-print"><img
                        src="../views/default/assets/img/youtube.png" class="pull-left" alt="Youtube"
                        style="width: 2%;"></a>
            </div>
            <div class="panel-body">


                <form class="form-inline hidden-print" method="post" action="absentReportController.php?do=show" id="search_Mes">
                    <div class="form-group">
                        <label class="sr-only"> اسم الموظف</label>
                        <select class="select2" name="chooseEmp" id="chooseEmp">
                            <option value=""></option>
                            <option value="0">كل الموظفين</option>
                            {foreach $allemployee as $data}
                            <option value="{$data->employeeId}">{$data->employeeName}</option>
                            {/foreach}
                        </select>
                    </div>

                    <div class="form-group">
                        <label class="sr-only">من التاريخ</label>
                        <input type="text" class="form-control awdatepicker" autocomplete="off"
                               data-date-format="yyyy-mm-dd" name="from">
                    </div>
                    <div class="form-group">
                        <label class="sr-only">إلى التاريخ</label>
                        <input type="text" class="form-control awdatepicker" autocomplete="off"
                               data-date-format="yyyy-mm-dd" name="to">
                    </div>

                    <button type="submit" class="btn btn-primary">بحث</button>
                </form>
                <hr/>


                <table class="table table-black dataTableClass">
                    <thead>
                    <tr bgcolor="">
                        <th>الرقم</th>
                        <th>اسم الموظف</th>
                        <th>اسم مجموعه الموظفين</th>
                        <th>اسم مجموعه الموظفين الفرعيه</th>
                        <th>غياب/حضور</th>
                        <th>تاريخ الحضور</th>
                        <th>
                            <table   class="table table-black" border="0" width="100%"  style="text-align:center" >
                                <tr ><td colspan="2" class="color-black">وقت العمل</td></tr>
                                <tr class="color-black">
                                    <td>من</td>
                                    <td>الي</td></tr>

                            </table>

                        </th>
                        <th>تفاصيل</th>

                    </tr>
                    </thead>
                    <tbody>

                    {foreach $employes as $emp}
                    <tr>
                        <td>{$emp->employeeId}</td>
                        <td>{$emp->employeeName}</td>
                        <td>{$emp->groupName}</td>
                        <td>{$emp->supgroupName}</td>
                        <td>{$emp->employeePhone}</td>
                        <td>{$emp->sysdate}</td>
                        <td><table width="100%"  style="text-align:center" class="table-black">

                            <tr>
                                <td width="50%">
                                {$emp->attendanceTime}
                            </td>
                                <td width="50%">
                                    {$emp->departureTime}
                                </td>
                            </tr>

                        </table></td>
                        <td><a href="#" type="button" id="absent" data-id="{$emp->id}" data-toggle="modal" data-target="#myModal" role="button" class="btn btn-default btn-lg notesicon"></a></td>
                    </tr>
                    {/foreach}

                    </tbody>
                </table>


                <div  class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog"  style="width:600px;">
                        <div class="modal-content">
                            <div class="modal-header text-center">
                                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true" class="text-left">&times;</span><span class="sr-only"></span></button>
                                <h3 class="modal-title" id="myModalLabel">تفاصيل الغياب</h3>
                            </div>
                            <div class="modal-body">

                                    <!-- المخرجات -->
                                    <div class="card">

                                        <div class="col-lg-6">
                                            <h4>تفاصيل الغياب</h4>
                                        </div>


                                        <div class="table-responsive">
                                            <table class="table billtable table-bordered table-black " id="wasteTable">
                                                <thead>
                                                <tr>
                                                    <th class="wdt300">م </th>
                                                    <th class="wdt300">التاريخ</th>
                                                    <th class="wdt300"> الحضور</th>
                                                    <th class="wdt300">الانصراف</th>
                                                    <th class="wdt300">حضور / غياب</th>
                                                </tr>
                                                </thead>
                                                <tbody id="empAbsent">
                                                <tr>
                                                    <td class="id">
                                                    </td>
                                                    <td class="date">
                                                    </td>
                                                    <td class="attendanceTime">
                                                    </td>
                                                    <td class="departureTime">
                                                    </td>
                                                    <td class="isAbsent">
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>


                                    </div>
                                    <!-- end of title row-->


                                    <div class="row  hidden-print m10" >
                                        <div class="col-lg-12 text-center">
                                            <button type="button"  data-dismiss="modal"   class="btn btn-primary">
                                                <i class="glyphicon glyphicon-ok "></i>  رجوع</button>
                                        </div>



                                    </div>
                                    <!-- end of fifth row-->

                            </div>

                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>
</div>